<script setup>
import { ref } from 'vue'

const settings = defineProps({
  collapse: Boolean,
  width: String
})

const iconColor = ref('color:#F8FAFB')
</script>


<template>
  <el-aside :width="settings.width+'px'">
    <el-scrollbar>
      <el-menu :default-openeds="['1']" 
      :collapse="settings.collapse" active-text-color="#F8FAFB"
        background-color="#1A1C1E" text-color="#74767A" router="true">
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <House />
            </el-icon><span>首页</span>
          </template>
          <el-menu-item index="/about">客户消费明细</el-menu-item>
        </el-sub-menu>
        <!-- <el-sub-menu index="2">
          <template #title>
            <el-icon>
              <Menu />
            </el-icon><span>文章管理</span>
          </template>
          <el-menu-item index="/admin/articles">文章管理列表</el-menu-item>
        </el-sub-menu> -->
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>


<style scoped>
.el-aside {
  height: 100vh;
  overflow: hidden;
  box-shadow: var(--el-box-shadow-lighter);
}

.el-scrollbar {
  height: 100vh;
  overflow: hidden;
  background-color: #1A1C1E;
}

.el-menu {

  border-right: none;
}</style>